<!--
 * @Author: 梁卓
 * @Date: 2022-02-25 09:35:29
 * @LastEditTime: 2022-03-10 11:35:10
 * @LastEditors: Please set LastEditors
 * @Description: 当前测试中学生的成绩
 * @FilePath: \dreamUi\src\componets\echarts\CurrentStudentScore.vue
-->
<template>
  <div class="currentScore_page">
    <div style="width: 100%; height: 100%" ref="currentScore_echarts"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "DreamuiCurrentstudentscore",

  data() {
    return {
      chart: null
    };
  },

  mounted() {
    this.getInfo()
    window.addEventListener("resize", this.chart);
  },
  destroyed() {
    window.removeEventListener("resize", this.chart);
  },

  methods: {
    getInfo() {
      this.$ajax.get('/scoreInfo/getLastExamScore').then(res => {
        console.log(res)
        const scoreArr = res.data.data;
        var arr = [0,0,0,0,0,0];
        scoreArr.forEach(item => {
          if (item >= 0 && item < 40) {
            arr[0] ++;
          } else if (item >= 40 && item < 60) {
            arr[1] ++;
          } else if (item >= 60 && item < 70) {
            arr[2] ++;
          } else if (item >= 70 && item < 80) {
            arr[3] ++;
          } else if (item >= 80 && item < 90) {
            arr[4] ++;
          } else if (item >= 90 && item < 100) {
            arr[5] ++;
          }
        });
        this.myEcharts(arr)
      });
    },
    myEcharts(scoreArr) {
      this.chart = echarts.init(this.$refs.currentScore_echarts);
      const size = this.$refs.currentScore_echarts.offsetWidth;
      //配置图表
      this.chart.setOption({
        title: {
          text: "最新一次测验学生的成绩分布",
        },
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: size / 20
          }
        },
        legend: {
          data: ["人数"],
        },
        toolbox: {
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: ['0~40','40~60','60~70','70~80','80~90','90~100'],
          },
        ],
        yAxis: [
          {
            type: "value"
          },
        ],
        series: [
          {
            name: "人数",
            type: "bar",
            data: scoreArr
          },
        ]
      });
      this.chart.resize();
    },
  },
};
</script>

<style scoped>
.currentScore_page {
  width: 100%;
  height: 100%;
}
</style>
